<template>
  <div class="flex-contain flex-column background-none">
    <div class="flex-contain flex-column title-area pad20 font-size-14 marBottom10 whiteBox">
      <div v-if="false" class="title-header">
        这是面包屑
      </div>
      <div class="title font-size-14 font-bold mar20-0">
        <span class="font-size-20 marginRight5">{{ ruleForm.houseNo }}</span>
        <span>(门牌号：{{ ruleForm.houseNumber }})</span>
      </div>
      <div>
        <div class="flex-contain flex-justify-content-space-between width100 marBottom10">
          <div>
            {{ ruleForm.position }}
          </div>
          <div>房屋地址：{{ ruleForm.longitude }},{{ ruleForm.latitude }}</div>
        </div>
        <div class="flex-contain width100 flex-justify-content-space-between">
          <span>户主名称：{{ ruleForm.houseOwnerName || ruleForm.objName }}</span>
          <span>户数：{{ ruleForm.householdNum }}</span>
          <span>常住人口数：{{ ruleForm.permanentPopulation || '-' }} 人</span>
          <span>建成时间：{{ ruleForm.buildDate }}</span>
          <span>房屋占地面积（平方米）：{{ ruleForm.housingArea }}</span>
          <span>房屋总建筑面积（平方米）：{{ ruleForm.buildingArea }}</span>
        </div>
      </div>
    </div>

    <div class="bottom-area whiteBox pad20">
      <div class="flex-contain">
        <div class="blue-block">问题信息({{ (questionlist || []).length }})</div>
      </div>

      <div class="sanshui">
        <div>
          “三水”是否规范接入污水管网
        </div>
        <div>
          厨房废水：
          <span
            :class="{
              red: ruleForm.cffs === '0' || ruleForm.cffs === 0,
              blue: ruleForm.cffs === '1' || ruleForm.cffs === 1
            }"
          >
            {{ boolFormat(ruleForm.cffs) }}
          </span>
        </div>
        <div>
          卫生间污水：
          <span
            :class="{
              red: ruleForm.wsjws === '0' || ruleForm.wsjws === 0,
              blue: ruleForm.wsjws === '1' || ruleForm.wsjws === 1
            }"
          >
            {{ boolFormat(ruleForm.wsjws) }}
          </span>
        </div>
        <div>
          阳台洗衣污水：
          <span
            :class="{
              red: ruleForm.ytxyws === '0' || ruleForm.ytxyws === 0,
              blue: ruleForm.ytxyws === '1' || ruleForm.ytxyws === 1
            }"
          >
            {{ boolFormat(ruleForm.ytxyws) }}
          </span>
        </div>
      </div>
      <div class="flex-contain flex-wrap pad20 item-list">
        <div
          v-for="(item, index) in questionlist || []"
          :key="index"
          class="item"
          style="width: 33%; margin-bottom: 20px"
        >
          <question-card :data="item" :dict-list="questionTypeList" />
        </div>
      </div>
      <div class="flex-contain flex-justify-content-space-between">
        <span>创建时间：{{ ruleForm.createTime || '-' }}</span>
        <span>更新时间：{{ ruleForm.updateTime || '-' }}</span>
        <span>创建人：{{ ruleForm.createBy || '-' }}</span>
        <span>更新人：{{ ruleForm.updateBy || '-' }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import chart from '@/views/components/Town/chart'
import questionCard from '@/views/components/Town/question-card'
import { getHoustDataById } from '@/api/House'
import { getDictList, getDictItemList } from '@/api/system'

export default {
  components: {
    chart,
    questionCard
  },
  data() {
    return {
      questionlist: [],
      item: {},
      ruleForm: {},
      questionTypeList: []
    }
  },
  mounted() {
    this.init()
  },
  activated() {
    this.init()
  },
  methods: {
    boolFormat(data) {
      return data === '1' || data === 1 ? '是' : '否'
    },
    init() {
      // 从Url获取id
      const query = this.$route.query

      this.item = query.item
      // // 测试
      // || '1656603173672681473'

      // this.getData()
      this.ruleForm = this.item.data

      this.questionlist = this.item.quesList
      this.getDictListFun()
    },
    getData() {
      if (!this.item) {
        return
      }
      const params = {
        id: this.id
      }
      // 获取房屋详情

      // getHoustDataById(params).then((res) => {
      //   this.ruleForm = res.result
      //
      //   // 从房屋详情中获取问题列表
      //   this.questionlist = res.result.quesList || []
      // })
    },
    getDictListFun() {
      // 获取问题类型枚举
      const params = {
        dictCode: 'ps_house_question_type',
        pageNo: 1,
        pageSize: 1
      }
      getDictList(params).then(res => {
        const dictId = (res.result.records || [])[0].id
        if (dictId) {
          const params = {
            dictId
          }
          getDictItemList(params).then(res => {
            this.questionTypeList = (res.result.records || []).map(x => {
              return {
                name: x.itemText,
                value: x.itemValue
              }
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bottom-area {
  .item-list {
    .item {
      margin-right: 0.5%;
      margin-bottom: 10px;
    }
    .item:nth-child(3n) {
      margin-right: 0;
    }
  }
}
.sanshui {
  margin-left: 20px;
  div {
    margin-top: 10px;
  }
}
</style>
